PolChart = Class.create(Configurable, {
    body_node_ : '',
    arr_data_ : [],
    arr_labels_ : [],
    arr_combined_ : new Array(),
    cnt_ : 0,
    initialize: function(options) 
    {
        this.setOptions(options);
        if(this.readData())
        {
            if(this.arr_data_.length <= this.options.max_data)
                this.drawChart();
            else
            {
                $(this.options.chart_id).show();
            }
        }
        else
        {
            $(this.options.chart_id).show();
        }
    },
    drawChart : function()
    {
        var chart_width, chart_height, raphael, r_chart;
        chart_width = parseInt(($(this.options.chart_id).up().getWidth())*0.9);
        try{
            chart_height = this.options.font_size * this.arr_labels_.length *2 ;
            raphael = Raphael(this.options.raphael_chart_id, chart_width, chart_height);
            r_chart = raphael.g.hbarchart(250, 50, chart_width-350, chart_height-100, [this.arr_data_], {stacked: false, type: "soft"}).label(this.arr_labels_, false);
            raphael.g.txtattr = {font:this.options.font_size+"px Arial, sans-serif", fill:"#000", "font-weight": "bold"};
            arr_combined = this.arr_combined_;
            arr_colors = [this.options.color_odd, this.options.color_even, this.options.color_hover];       
            for (var cnt = 0; cnt < r_chart.bars[0].length; ++cnt) 
            {
                var bar = r_chart.bars[0][cnt];
                if(cnt % 2 == 0)
                {
                    bar.attr("fill", this.options.color_odd);
                    bar.attr("stroke", this.options.color_odd);
                }
                else
                {
                    bar.attr("fill", this.options.color_even);
                    bar.attr("stroke", this.options.color_even);
                }
            }
            r_chart.hover(function() {
                this.flag = raphael.g.popup(this.bar.x, this.bar.y, (arr_combined[this.bar.id]['label'] + ": " + arr_combined[this.bar.id]['value'] || "0") + " ").insertBefore(this);
                this.bar.attr("fill", arr_colors[2]);
                this.bar.attr("stroke", arr_colors[2]);
            }, function() {
                this.flag.animate({opacity: 0}, 100, function () {this.remove();});
                this.bar.attr("fill", arr_colors[this.bar.id % 2]);
                this.bar.attr("stroke", arr_colors[this.bar.id % 2]);
            });
            $(this.options.chart_id).remove();
        }
        catch(err)
        {
            //alert(err.message);
        }
    },
    readData : function()
    {
        $$('.' + this.options.label_class).each(function(element){
            this.arr_labels_.push(element.innerHTML);
            this.arr_combined_[this.cnt_] = new Array();
            this.arr_combined_[this.cnt_++]['label'] = element.innerHTML;
        }.bind(this));
        this.cnt_ = 0;
        $$('.' + this.options.data_class).each(function(element){
            this.arr_data_.push(parseFloat(element.innerHTML.gsub(".", "").gsub(",", ".")));
            this.arr_combined_[this.cnt_++]['value'] = element.innerHTML;
        }.bind(this));
        if(this.arr_data_.length != this.arr_labels_.length)
            return false;
        return true;
    }
});

PolChart.DEFAULT_OPTIONS = {
    chart_id: 'chart',
    raphael_chart_id: 'raphael_chart',
    label_class: 'region',
    data_class: 'value',
    font_size: '12',
    max_data: 200,
    color_even: '#f1e119',
    color_odd: '#fee973',
    color_hover: '#0c9b6b'
};

new PolChart();
